<template>
<!-- 
  购物车：
      1、进入购物车页面进行渲染（产品列表，勾选列表，全选按钮）
      2、全选/全不选的联动 （点击每一项商品，点击全选按钮）
      3、进入编辑状态（编辑状态的切换靠isEditing来完成）
      4、删除商品（布局和删除请求，删除到为空时候的处理）

 -->
  <div>
    <Tips />
    <!-- 产品列表  -->
    <van-checkbox-group v-model="result">
      <!-- name属性需要每一项都不同，相同的话，点击会一起控制。 -->
      <van-checkbox :name="item.id" v-for="item in cartList" :key="item.id" @click="goodsItemClick(item)" :disabled="isEditing">
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
            <van-stepper v-model="item.number" v-show="isEditing" @change="chanStepNum(item)"/>
              <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(item.product_id)"/>
        </template>
        </van-swipe-cell>
      </van-checkbox>
      <!-- <van-checkbox name="b">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
        /> 
      </van-checkbox>-->
    </van-checkbox-group>



    <!-- 提交订单栏 -->
    <van-submit-bar :price="cartTotal.checkedGoodsAmount * 100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checkedAll" :disabled="isEditing || cartList.length===0">全选</van-checkbox>
      <template #tip>
         累计共{{cartTotal.goodsCount}}件商品，可点击 <van-button  :type="isEditing?'danger':'primary'"  size="small" @click="isEditing=!isEditing">{{isEditing?'完成编辑':'编辑'}}</van-button>  按钮进行商品数量修改 
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {GetCartData , chanGoodsChecked, stepNum,DelGoods} from "@/request/api"
import Tips from "@/components/Tips"
import Vue from "vue"
export default {
  components:{
    Tips
  },
  data () {
    return {
        // ui层面，决定了有没有被选中的数组。 
        // 里面每一个元素可能是van-checkbox的name属性的值。
        result: [],
        // 全选复选框的值
        // checkedAll:false,
        // 定义购物车数据
        cartList:[],
        // 总数信息对象
        cartTotal:{},
        // 是否在编辑状态
        isEditing:false
    }
  },
  computed:{
    checkedAll:{
      get(){
        // return true/false
        // 受result数组的影响
        // result数组 和 cartList数组的长度是不是相等    并且长度不为0
        return this.result.length == this.cartList.length && this.cartList.length !== 0
      },
      set(val){
        if(this.isEditing)return;
        // console.log("点击了全选按钮", val)   // val就是要修改成的值

        // 后端要求参数格式的处理
        let ids = this.cartList.map(item=>{
          return item.product_id
        })
        // console.log(ids.join()); // [213, 217, 162]   =====>    213,217,162
        // console.log(ids.toString()); // [213, 217, 162]   =====>    213,217,162

        // 发起全选/全不选的请求
        chanGoodsChecked({
          isChecked: val==false?"0":"1", // 告诉后端点击全选按钮之后，要全部改成0 或者1 
          productIds:ids.join(),  // 告诉后端哪些产品需要修改
        }).then(res=>{
          // console.log(res);
          this.renderData(res.data);
        })
      }
    }
  },
  created(){
      GetCartData().then(res=>{
        console.log(res);
        // 调用渲染数据的方法
        this.renderData(res.data)

      })
  },
  methods:{
    del(pid){
      // console.log("del", pid);
      DelGoods({
        productIds:pid.toString(),
      }).then(res=>{
        // console.log(res);
        this.renderData(res.data);
      })
    },
    chanStepNum(item){
        console.log("修改了步进器中的数字");
        stepNum({
          goodsId:item.goods_id,
          id:item.id,
          number:item.number,
          productId:item.product_id,
        }).then(res=>{
          // console.log("修改步进器之后的res",res);
          this.renderData(res.data);
        })
    },
    renderData(data){
      // 每一次渲染数据之前，this.result需要做一个清空。否则，this.result的长度会越来越长，影响到选中列表和checkAll的这些值。
      this.result=[];
      let {cartList, cartTotal} = data;
        // 渲染产品列表数据
        this.cartList = cartList;
        this.cartTotal = cartTotal;

        // 渲染产品列表每一项是否被选中
        // 遍历cartList数组，如果checked为1，我就把item.id放到result数组中
        cartList.map(item=>{
          item.checked?this.result.push(item.id):""
        })
    },
    onSubmit(){},
    goodsItemClick(item){
      if(this.isEditing)return;
      // 点击每一项商品执行这里
      // console.log("点击了商品, 获取到原本的勾选状态", item.checked);
      // 点击每一项商品，发起请求告诉后端我们选中/取消选中这件商品
      chanGoodsChecked({
        isChecked:item.checked==1?"0":"1",
        productIds:item.product_id.toString()
      }).then(res=>{
          // console.log("点击了商品的res",res);
          // 拿到数据之后需要重新渲染数据（渲染产品列表数据和产品列表每一项的勾选状态）
          // 调用渲染数据的方法
          this.renderData(res.data);
      })
    }
  },
  // 组件内的守卫
  beforeRouteEnter(to, from, next) {
    // 理解： 比全局的写法更好，不用每次跳转路由都去进行判断
    // console.log("执行了cart组件中的beforeRouteEnter");
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    let token = localStorage.getItem("token");
    if(token){
      next()
    }else{
      Vue.prototype.$toast("请先登录！") 
      // 拿不到不到token，说明没有登录，跳转到 “我的”  /user
      setTimeout(()=>{
        next("/user")
      },800)
      
    }
  }
}
</script>
 
<style lang = "less" scoped>
  .van-checkbox-group{
    padding: .1rem;
    background-color: #fff;
    .van-checkbox{
      border-bottom: 1px solid #ccc;
      padding: .1rem 0;
    }
    /deep/.van-checkbox__label{
      flex:1;
    }
  }
  .van-submit-bar{
    bottom:.5rem;
  }
  .van-submit-bar__tip{
    display: flex;
    align-items: center;
    .van-button{
      margin: 0 .08rem;
    }
  }
  .van-card__title{
    font-size:.18rem;
    line-height: .24rem;
    max-height:.5rem;
  }
  .van-card__price,.van-card__num{
    font-size:.16rem;
  }
  .van-stepper{
    text-align: right;
  }
  .delete-button{
    height:100%;
  }
</style>